import { state, State } from "../../config.js";
import { randomColor } from "../../utils/randomColor.js";
import { box, currentState, domg, role1, role2 } from "../../index.js";
import { getPosition } from "../newTransfrom.js";
import { emit, scoket } from "../../utils/scoket.js";
import { collide } from "./collide.js";
import { allRolePosition } from "../../role.js";

const createBullet = (
  point: { x: number; y: number },
  direction: number,
  preState?: State
) => {
  //如果这个子弹是自己触发的就用自己的state如果不是就用服务器的state
  const cState = preState || state;
  const bullel = document.createElement("div");
  bullel.classList.add("bullet");
  bullel.style.transform = `translate(${point.x}px,${point.y}px)`;
  bullel.style.backgroundColor = randomColor();
  let timer: any = -1;
  domg("#app").appendChild(bullel);

  const bulletState = {
    h: bullel.offsetHeight,
    w: bullel.offsetWidth,
  };

  //#region 开启定时器每秒移动并判断情况
  timer = setInterval(() => {
    const position = getPosition(bullel);
    //判断是否进入边界
    if (position.x + 10 > box.boxW || position.x - 10 < 0) {
      position.x = box.boxW;
      bullel.remove();
      clearInterval(timer);
    }
    //#region 是否击中判断
    position.x += cState.bulletSpeed * direction;
    let bulletinfo = {
      x: position.x,
      y: position.y,
      w: bulletState.w,
      h: bulletState.h,
    };
    let roleInfo;

    if (preState?.role === "p2" || (!preState && currentState.role === "p2")) {
      roleInfo = allRolePosition.p1;
    }
    if (preState?.role === "p1" || (!preState && currentState.role === "p1")) {
      roleInfo = allRolePosition.p2;
    }
    collide(bulletinfo, roleInfo as any, () => {
      bullel.remove();
      clearInterval(timer);
      if (preState) return;
      if (currentState.role === "p1") {
        scoket.$emit({ role: "p2", path: "/hp", value: { hp: -1 } });
      }
      if (currentState.role === "p2") {
        scoket.$emit({ role: "p1", path: "/hp", value: { hp: -1 } });
      }
    });
    //#endregion
    bullel.style.transform = `translate(${position.x}px,${position.y}px)`;
  }, 1000 / state.bulletMove);
  //#endregion
};
//监听来自服务器射击的响应
scoket.$on((res) => {
  if (res.path === "/fire/j") {
    let val = res.value as State;
    val.role = res.role;
    if (res.role === "p1") {
      //收到响应角色来自p1就把当前子弹射击方向改为正方向
      val.direction = 1;
      fire(role1, val);
    }
    if (res.role === "p2") {
      //收到响应角色来自p2就把当前子弹射击方向改为反方向
      val.direction = -1;
      fire(role2, val);
    }
  }
});

//掉血操作
scoket.$on(({ path, role, value: { value } }) => {
  if (path !== "/hp") return;
  if (role === currentState.role && role === "p1") {
    state.hp += value.hp;
    emit.p1("/getState", state);
  }
  if (role === currentState.role && role === "p2") {
    state.hp += value.hp;
    emit.p2("/getState", state);
  }
});

let timer: any;
/**
 *
 * @param ele 子弹来自那个角色
 * @param _dire 可选参数,如果有这个参数就说明是来自服务器,如果没有就是来自玩家自己
 * @returns
 */

export const fire = function (ele: HTMLElement, _dire?: State) {
  let direction;
  if (_dire) {
    direction = _dire.direction as number;
  } else {
    direction = currentState.role === "p1" ? 1 : -1;
  }
  //及时响应操作
  if (_dire?.role === currentState.role) return;
  if (!_dire) if (typeof timer === "number") return;

  //判断这个函数是玩家调用的还是服务器返回的来决定是否发送请求
  _dire ||
    scoket.$emit({
      role: currentState.role,
      path: "/fire/j",
      value: state,
    });

  //#region 创建子弹
  const rolePosition = getPosition(ele);
  const firePoint = {
    //子弹需要生成的位置
    x:
      rolePosition.x +
      direction * allRolePosition[currentState.role as "p2" | "p2"].w,
    y: rolePosition.y + allRolePosition[currentState.role as "p2" | "p2"].h / 2,
  };

  createBullet(firePoint, direction, _dire);
  //#endregion

  //控制子弹发射频率
  let frequency;
  if (_dire) {
    frequency = _dire.bulletFrequency;
  } else {
    frequency = state.bulletFrequency;
  }
  if (_dire) return;
  let _t: any = setTimeout(() => {
    timer = undefined;
  }, 1000 / frequency);
  timer = _t;
};
